import React from "react"
import { Button, Col, Row } from "antd"
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import YQTableList from "./components/TableList"
import YQModalForm from "./components/ModalForm"
import YQSearchForm from "./components/SearchForm"
import styles from "./components/Styles.less"

const Home = ({ location, dispatch, statecode }) => {

  const { tableData, pageout } = statecode
  //通过location对象获取当前页面的路由信息
  const { pathname, query } = location

  //定义表格组件的传参数据
  const TableWrap = {
    tableData,
    //表格操作(表单数据的管理、编辑、删除等事件)
    operation: {
      editFun: (record) => {
        dispatch({
          type: 'statecode/editStateCode',
          payload: { record },
        })
      },
      delFun: (record) => {
        dispatch({
          type: 'statecode/delStateCode',
          payload: { record },
        })
      },
    },
    //表格分页信息
    pagination: {
			defaultCurrent: query.page,
			total: pageout.rowcountall,
			onChange: (page, pageSize) => {
				//需用dispatch 路由push
				dispatch(routerRedux.push({
					pathname,
					query: {
						...query,
						page,
						pageSize,
					},
				}))
			},
			onShowSizeChange: (page, pageSize) => {
				//需用dispatch 路由push
				dispatch(routerRedux.push({
					pathname,
					query: {
						...query,
						page,
						pageSize,
					},
				}))
			},
		},
  }

  //点击查询事件
  const SearchWarps = {
    // 搜索提交
		searchFun: (fields) => {
      // console.log(JSON.stringify(fields))
      dispatch({
        type: 'statecode/queryStateCode',
        payload: { fields },
      })
    },
  }

  //创建状态码事件
  const addDataAction = (fields) => {
    console.log("点击了确认提交事件" + JSON.stringify(fields))
    //TODO 添加表单数据的校验
    dispatch({
      type: 'statecode/addStateCode',
      payload: fields,
    })
  }

  return (
    <div className={styles.antMineStyle}>
      <div>
        <Row gutter={16}>
          <Col span={8}>
            <div>
              <span style={{ fontSize: "large", color: "#1890ff" }} >|</span>
              <label style={{ fontSize: "larger", alignContent: "center", marginLeft: 10 }}>状态码列表</label>
            </div>
          </Col>

          <Col span={16}>

            <YQModalForm record={{}} onOk={addDataAction}>
              <Button type="primary" style={{ float: "right" }}>创建状态码</Button>
            </YQModalForm>

            <Button icon="sync" style={{
              float: "right",
              marginRight: 10,
              color: "#666666",
              background: "#EEEEEE",
              border: "1px,solid, #DDDDDD",
            }}>
            </Button>

          </Col>
        </Row>
        <hr style={{ width: "100%", backgroundColor: "#cccccc", border: "none", height: 1, marginTop: 15 }}></hr>
      </div>


      <div style={{ marginTop: 10 }}>

        <YQSearchForm {...SearchWarps} />
        {/* <Row gutter={8} justify="space-between">
          <Col style={{ float: "left", width: 256 }}>
            <Input placeholder="状态码：输入状态码查询" />
          </Col>

          <Col style={{ float: "left" }}>
            <Button type="primary" onClick={() => { OnButtonClick() }}>搜索</Button>
          </Col>

        </Row> */}
      </div>

      <div>
        <YQTableList {...TableWrap} />
      </div>

    </div>
  )
}

function mapStateToProps (state) {
  const { statecode } = state
  return {
    statecode,
  }
}

export default connect(mapStateToProps)(Home)